/* eslint-disable no-global-assign */
/* eslint-disable no-undef */
import React, { Component, useState } from 'react';
import { Input, Select } from 'antd';
import axios from 'axios';
import { DownloadOutlined } from '@ant-design/icons';
import { Button, Radio, Space, Table, Tag, Form, Drawer, DatePicker, Switch } from 'antd';
// const handleChange = (value) => {
//   console.log(`selected ${value}`);
// };


class AccountManagement extends Component {
  formRef = React.createRef() //清空输入框内容
  formRef1 = React.createRef()
  constructor(props) {
    super(props);
    this.state = {
      index: '',
      current: 1,
      pageSize: 1,
      open: false,
      open1: false,
      rowid: null,
      key: 3,
      key1: "",
      name: "",
      phone: "",
      joker: "",
      people: "",
      time: "",
      state: "",
      showData: {
        key: '',
        name: '',
        phone: 0,
        joker: '',
        people: '',
        time: '',
        state: ''
      },
      columns: [
        {
          title: '所属人姓名',
          dataIndex: 'name',
          key: 'name',
          render: (text) => <a>{text}</a>,
        },
        {
          title: '手机',
          dataIndex: 'phone',
          key: 'phone',
        },
        {
          title: '角色',
          dataIndex: 'joker',
          key: 'joker',
        },
        {
          title: '添加人',
          dataIndex: 'people',
          key: 'people',
        },
        {
          title: '最后操作时间',
          dataIndex: 'time',
          key: 'time',
        },
        {
          title: '状态',
          dataIndex: 'state',
          key: 'state',
        },
        {
          title: '操作',
          key: 'action',
          render: (row, record, index) => (

            <Space size="middle" >
              <Button type="link">禁用</Button>
              <Button onClick={() => this.showDrawer1(row, record, index)} type="link">编辑</Button>
              <Button type="link" onClick={() => this.remove(row, record, index)}>删除</Button>
            </Space>
          ),
        },
      ],

      data: [
        {
          key: '1',
          name: 'John Brown',
          phone: 32,
          joker: 'New York No. 1 Lake Park',
          people: '超级管理员1',
          time: '2022-2-2',
          state: '启用'
        },
        {
          key: '2',
          name: 'John Brown',
          phone: 32,
          joker: 'New York No. 1 Lake Park',
          people: '财务',
          time: '2022-2-2',
          state: '启用'
        },
        {
          key: '3',
          name: 'John Brown',
          phone: 32,
          joker: 'New York No. 1 Lake Park',
          people: '客服',
          time: '2022-2-2',
          state: '启用'
        },
      ],
    }
  }
  remove = (row, record, index) => {

    this.setState(() => {
      return {
        index: index + (this.state.current - 1) * this.state.pageSize,

      }


    }, () => {
      this.setState({
        data: this.state.data.splice(this.state.index, 1),
       
      })
      
      this.setState({
          data :[...this.state.data]
       
      })
      //  console.log(this.state.index);
      // console.log(row.key, record, index, '删除');
    })

  }
  //编辑
  edit = () => {
    this.setState(() => {
      return {
        showData: {
         key: this.state.key1,
        name: this.state.name,
        phone:  this.state.phone,
        joker:  this.state.joker,
        people:  this.state.people,
        // time: this.state.time,
        state:  this.state.state,
      }
    }})
     this.setState({
      data:this.state.data.splice(this.state.index,1,this.state.showData),
      key: this.state.key + 1
     })
    let data=[...this.state.data]
    this.setState({
      data
    })
  }
  //分页
  onShowSizeChange = (current, size) => {
    // console.log("当前页", current)
    // console.log("每页数据和pageSize一样", size)
    this.setState({ current: current })
    this.setState({ pageSize: size })
  }
  //分页
  onChange = (page, pageSize) => {
    // console.log("页码", page)
    // console.log("每页数据", pageSize)
    this.setState({ current: page })
    this.setState({ pageSize: pageSize })

  }
  //实现读取数据——————get
  readData = () => {
    let Adata = this.state.data
    this.setState({
      data: Adata
    })
    console.log(22222);
  }
  //显示新增信息抽屉
  showDrawer = () => {
    this.setState({
      open: true
    });
  };
  //关闭新增信息对话框
  onClose = () => {
    this.setState({
      open: false
    });
    message.error('取消操作');
  };
  onClose1 = () => {
    this.setState({
      open1: false
    });
    message.error('取消操作');
  };
  //显示修改信息抽屉
  showDrawer1 = (row, record, index) => {
    this.setState(() => {
      return {
         index: index + (this.state.current - 1) * this.state.pageSize,
        open1: true,
        key: row.key,
        name: row.name,
        phone: row.phone,
        joker: row.joker,
        people: row.people,
        time: row.time,
        state: row.state,
        showData: {
          key: row.key,
          name: row.name,
          phone: row.phone,
          joker: row.joker,
          people: row.people,
          time: row.time,
          state: row.state
        }
      }
    }, () => {
      console.log(this.state.name)
    });

  };
 

  //新增信息时的Input输入框事件
  handleChange = (e) => {
    this.setState({
      [e.target.id]: e.target.value
    })
    console.log(e.target.value, 1111111);
    console.log(this.state.name, 1213);
  }
  checked = (e) => {
    // console.log(`switch to ${checked}}`);

    if (e == true) {
      e = '启用'
    } else {
      e = '禁用'
    }

    console.log(this.state.states = e);

  };
  time = (date, dateString) => {
    console.log(dateString);
    this.state.time = dateString
  }

   handleChange1 = (e) => {
    this.setState({
      [e.target.id]: e.target.value
    })
    console.log(e.target.value, 1111111);
    console.log(this.state.name, 1213);
  }
  checked1 = (e) => {
    // console.log(`switch to ${checked}}`);

    if (e == true) {
      e = '启用'
    } else {
      e = '禁用'
    }

   

  };
  time1 = (date, dateString) => {
    console.log(dateString);
    // this.state.time = dateString
  }
  //新增数据
  postData = () => {
    let addData = {
      key: this.state.key,
      name: this.state.name,
      phone: this.state.phone,
      joker: this.state.joker,
      people: this.state.people,
      time: this.state.time,
      state: this.state.states
    }
    this.setState({
      data: [...this.state.data, addData],
      key: this.state.key + 1
    })
    console.log(addData, '测试');
    console.log(this.state.data, '测试2');
    console.log(this.state.key, '测试3');
    this.setState({
      name:"", 
      phone:"",
      joker:"",
      people:"",
      state:"",
    })
  }
  search = (a) => {
    let result = a
    console.log(a, 111);
    clearTimeout(window.timer)

    window.timer = setTimeout(() => {
      let B = this.state.data.filter(r => r.people === result)

      if (B.length !== 0) {
        console.log(B, 'data');
        this.setState({
          data: B
        })
      }
    }, 500)
  }
  render() {
    let { name, phone, people, joker, time, states } = this.state;
    return (
      <div style={{ height: '100%' }} className="App">
        <Drawer title="添加个人信息" onClose={this.onClose} open={this.state.open}>
          <Form ref={this.formRef} onFinish={this.postData} onFinishFailed={this.onFinishFailed} autoComplete="off" >
            <Form.Item
            
              label="所属人姓名"
              rules={[{ required: true, message: '请输入所属人姓名', },]} >
              <Input placeholder="请输入所属人姓名" id="name" value={name} onChange={this.handleChange} title='输入2-6位中文汉字' />
            </Form.Item>
            <Form.Item
            
              label="手机"
              rules={[{ required: true, message: '请输入手机号', },]}  >
              <Input placeholder="请输入手机号" id="phone" value={phone} onChange={this.handleChange} title='输入男或女' />
            </Form.Item>
            <Form.Item
             
              label="角色"
              rules={[{ required: true, message: '请输入角色名称', },]} >
              <Input placeholder="请输入角色名称" id="joker" value={joker} onChange={this.handleChange} title='输入1-120之间的数字' />
            </Form.Item>
            <Form.Item
             
              label="添加人"
              rules={[{ required: true, message:'请输入添加人', },]} >
              <Input placeholder="请输入添加人" id="people" value={people} onChange={this.handleChange} title='输入有效中文汉字' />
            </Form.Item>
            <Form.Item name='time' label="最后操作时间">
              <DatePicker id='time' value={time} onChange={this.time} />
            </Form.Item>
            <Form.Item label="状态" valuePropName="checked">
              <Switch defaultChecked={true}  value={states} checkedChildren='启用' onClick={this.checked} />
            </Form.Item>
            <Button onClick={this.onClose} >取消</Button>
            <Button onClick={this.onClose} htmlType="submit" type="primary">完成 </Button>
          </Form>
        </Drawer>
        <Drawer title="修改个人信息" onClose={this.onClose1} open={this.state.open1}>
          <Form ref={this.formRef1} onFinish={this.edit} onFinishFailed={this.onFinishFailed} autoComplete="off" >
            <Form.Item
             
              label="所属人姓名"
              rules={[{ required: true, message: '请输入所属人姓名', },]} >
              <Input placeholder="请输入所属人姓名" id="name" value={name} onChange={this.handleChange1} title='输入2-6位中文汉字' />
            </Form.Item>
            <Form.Item
             
              label="手机"
              rules={[{ required: true, message: '请输入手机号', },]}  >
              <Input placeholder="请输入手机号" id="phone" value={phone} onChange={this.handleChange1} title='输入男或女' />
            </Form.Item>
            <Form.Item
             
              label="角色"
              rules={[{ required: true, message: '请输入角色名称', },]} >
              <Input placeholder="请输入角色名称" id="joker" value={joker} onChange={this.handleChange1} title='输入1-120之间的数字' />
            </Form.Item>
            <Form.Item
             
              label="添加人"
              rules={[{ required: true, message: '请输入添加人', },]} >
              <Input placeholder="请输入添加人" id="people" value={people} onChange={this.handleChange1} title='输入有效中文汉字' />
            </Form.Item>
            <Form.Item  label="最后操作时间">
              <DatePicker id='time' onChange={this.time1} />
            </Form.Item>
            <Form.Item label="状态" valuePropName="checked">
              <Switch defaultChecked={true} id='states' value={states} checkedChildren='启用' onClick={this.checked1} />
            </Form.Item>
              
            <Button onClick={this.onClose1} >取消</Button>
            <Button onClick={this.onClose1} htmlType="submit" type="primary">完成 </Button>
          </Form>
        </Drawer>
        {/* 搜索大盒子 */}
        <div style={{ backgroundColor: 'white', width: '100%', boxSizing:'border-box',padding:'20px 0',display: 'flex', justifyContent: 'center' }}>
          <div style={{ width: '45%', height: '100%', backgroundColor: 'white', display: 'flex', flexWrap: 'wrap' }}>
            <div style={{ width: '45%', display: 'flex', justifyContent: 'space-around', alignItems: 'center' }} >所属人姓名 <Input style={{ width: '50%', marginLeft: '3%', }} placeholder="Basic usage" onInput={this.search} value={this.state.name} /></div>
            <div style={{ width: '45%', display: 'flex', justifyContent: 'space-around', alignItems: 'center' }}>手机 <Input style={{ width: '50%', marginLeft: '3%' }} placeholder="Basic usage" /></div>
            <div style={{ width: '45%', display: 'flex', justifyContent: 'space-around', alignItems: 'center' }}>角色 <Select
              defaultValue="超级管理员1"
              onChange={this.search}
              style={{
                width: "45%",
                marginLeft: '3%'
              }}

              options={[
                {
                  value: '客服',
                  label: '客服',
                },
                {
                  value: '财务',
                  label: '财务',
                },
                {
                  value: '超级管理员1',
                  label: '超级管理员1',
                },

              ]}
            /></div>
            <div style={{ width: '45%', display: 'flex', justifyContent: 'space-around', alignItems: 'center' }} >状态 <Select
              defaultValue="启用"
              style={{
                width: '45%',
                marginLeft: '3%'
              }}
              onChange={this.handleChange}
              options={[
                {
                  value: '启用',
                  label: '启用',
                },
                {
                  value: '禁止',
                  label: '禁止',
                },
                {
                  value: '全部',

                  label: '全部',
                },

              ]}
            /></div>
            <div style={{ width: '45%', display: 'flex', justifyContent: 'space-around', alignItems: 'center' }}>
              <Button >搜索</Button>
              <Button onClick={this.showDrawer} type="primary" >新建账号</Button>
             
            </div>
          </div>
        </div>
        <Table columns={this.state.columns} dataSource={this.state.data} pagination={{
          position: ['bottomLeft'], defaultCurrent: [1], defaultPageSize: [1], pageSizeOptions: [1, 2, 3, 4], showSizeChanger: true,
          showQuickJumper: [true], showTotal: () => `共${this.state.data.length}条`, onChange: this.onChange, onShowSizeChange: this.onShowSizeChange
        }} />
      </div>
    );
  }
}
export default AccountManagement;

